<template>
  <jc-bar
    :customStyle="{ backgroundColor: 'transparent' }"
    :prve-btn="true"
    :search-btn="true"
    @prve="$router.back()"
    color="none"
  >
    <v-spacer></v-spacer>
    <span class="text-title">
      {{ title }}
    </span>

    <v-spacer></v-spacer>
  </jc-bar>

  <v-list style="background-color: transparent; overflow: auto" :style="{ height: scrollHeight + 'px' }" app>
    <jc-list-item v-for="item in list" :key="item._id" :item="item" @itemclick="itemClick"></jc-list-item>
  </v-list>
</template>
<script>
import JcBar from "@/layout/JcBar.vue";
import BackageContainer from "@/layout/BackageContainer.vue";
import { getSgbItem } from "@/api/cloudbase-sgbedit.js";
import JcListItem from "@/components/JcListItem";
import { shallowReadonly } from "vue";
import { toPlayPage } from "@/utils/utils";
export default {
  name: "OriginalPoetryDetail",
  props: {
    id: {
      type: String,
      required: true,
    },
  },
  computed: {
    title() {
      if (this.list.length > 0) {
        const { shijiName } = this.list[0];
        return shijiName;
      }
      return "原创赞美";
    },
  },
  data() {
    return {
      benched: 10,
      list: [],
      scrollHeight: 600,
    };
  },
  components: {
    BackageContainer,
    JcBar,
    JcListItem,
  },
  created() {
    this.init();
  },
  mounted() {
    console.log(document.body.offsetHeight);
    this.scrollHeight = document.body.offsetHeight - 48;
  },
  methods: {
    init() {
      getSgbItem().then((res) => {
        const filterRes = res.data.filter((item) => item.shijiIndex === +this.id);
        this.list = shallowReadonly(filterRes);
      });
    },
    itemClick(item) {
      console.log(item);
      toPlayPage(item);
    },
  },
  watch: {
    id() {
      this.list = [];
      this.init();
    },
  },
};
</script>
